<template>
  <!-- 评价 -->
  <div class="comment">
    <van-tabs v-model="active" color="rgb(255, 195, 0)" class="comment_main">
      <van-tab title="全部" class="comment_main_1">
        <div class="details">
          <!-- 内容 -->
          <div class="details_li" v-for="index in Commentlist" :key="index">
            <img :src="index.avatar" alt="" />
            <div class="details_li_main">
              <p>
                <span>{{ index.username }}</span
                ><span >{{ index.rateTime }}</span>
              </p>
              <p>
                <van-rate
                  v-model="index.score"
                  :size="12"
                  color="rgb(255, 111, 15)"
                  void-icon="star"
                  void-color="#eee"
                  readonly
                />
                <span class="stars">{{ index.score + 9 }}分钟到达</span>
              </p>
              <p>{{ index.text }}</p>
              <div class="give">
                <i>点赞</i>
                <div>
                  <span v-for="vtex in index.recommend" :key="vtex">{{
                    vtex
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="满意" class="comment_main_1">
        <div class="details">
          <!-- 内容 -->
          <div class="details_li" v-for="index in Commentlist" :key="index">
            <img :src="index.avatar" alt="" />
            <div class="details_li_main">
              <p>
                <span>{{ index.username }}</span
                ><span>{{ index.rateTime }}</span>
                ><span>{{ index.rateTime }}</span>
              </p>
              <p>
                <van-rate
                  v-model="index.score"
                  :size="12"
                  color="rgb(255, 111, 15)"
                  void-icon="star"
                  void-color="#eee"
                  readonly
                />
                <span class="stars">{{ index.score + 9 }}分钟到达</span>
              </p>
              <p>{{ index.text }}</p>
              <div class="give">
                <i>点赞</i>
                <div>
                  <span v-for="vtex in index.recommend" :key="vtex">{{
                    vtex
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="不满意" class="comment_main_1">
        <div class="details">
          <!-- 内容 -->
          <div class="details_li" v-for="index in Commentlist" :key="index">
            <img :src="index.avatar" alt="" />
            <div class="details_li_main">
              <p>
                <span>{{ index.username }}</span
                ><span>{{ index.rateTime }}</span>
              </p>
              <p>
                <van-rate
                  v-model="index.score"
                  :size="12"
                  color="rgb(255, 111, 15)"
                  void-icon="star"
                  void-color="#eee"
                  readonly
                />
                <span class="stars">{{ index.score + 9 }}分钟到达</span>
              </p>
              <p>{{ index.text }}</p>
              <div class="give">
                <i>点赞</i>
                <div>
                  <span v-for="vtex in index.recommend" :key="vtex">{{
                    vtex
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getratings } from "@/apis/goods"; //商家数据接口
import { IAsss } from "../../../interface/goodsinterface"; //约束商家
import dayjs from 'dayjs'

@Component
export default class Comment extends Vue {
  active: number = 0; //激活样式
  value: any = 0; //星星评分
  Commentlist: IAsss = {};

  created(): void {
    $_getratings().then((res) => {
      //   console.log(res.data.data, "评论");
      this.Commentlist = res.data.data;
      console.log(this.Commentlist,"llll");
    //  let  b=this.dayjs(this.Commentlist.rateTime).format('YYYY-MM-DD HH:mm:ss')
   
      
    });
  };
  //   filter:{
  //   formatdata(val){
  //     dayjs(val.rateTime).format('YYYY-MM-DD HH:mm:ss')
  //   }
  // }

}
</script>

<style scoped lang="scss">
.comment {
  height: 100%;
}
.comment_main {
  height: 100%;
  overflow-y: scroll;
}
.comment_main::-webkit-scrollbar {
  display: none;
}
.comment_main1 {
  height: 100%;
  // overflow-y: scroll;
}
//评论区
.details {
  padding: 10px 0;
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  // overflow-y: scroll;
  background-color: rgb(255, 255, 255);
  //   background-color: rgb(228, 135, 135);
  .details_li {
    margin-top: 20px;
    width: 90%;
    height: 100%;
    display: flex;
    // overflow-y: scroll;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(235, 235, 235);
    padding-bottom: 20px;
    // overflow-y: scroll;

    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .details_li_main {
      //   background-color: rgb(109, 200, 228);
      width: 100%;
      flex: 1;
      & > p:nth-of-type(1) {
        display: flex;
        justify-content: space-between;
        margin: 2px 0;
        & > span:nth-of-type(1) {
          font-weight: bold;
        }
        & > span:nth-of-type(2) {
          color: rgb(133, 133, 133);
        }
      }
      & > p:nth-of-type(2) {
        margin: 3px 0px;
        span {
          vertical-align: bottom;
          color: rgb(133, 133, 133);
        }
      }
      & > p:nth-of-type(3) {
        margin: 5px 0;
      }
      .give {
        // background-color: rgb(132, 212, 166);
        width: 100%;
        display: flex;
        i {
          width: 90px;
        }
        span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 10px;
          border-radius: 3px;
          margin-bottom: 4px;
          border: 1px solid rgb(175, 175, 175);
          margin-right: 5px;
          color: rgb(175, 175, 175);
          padding: 2px 5px;
        }
      }
    }
  }
}

//星星穿透
::v-deep.van-rate {
  color: rgb(255, 111, 15);
  margin-right: 10px;
}

::v-deep.van-van-tabs__nav {
  position: fixed;
}
</style>